<template>
	<view class="container">
		<!-- 滚动容器，实现页面纵向滚动 -->
		<scroll-view class="scroll-content" scroll-y="true">
			<!-- 泉州风光轮播区 -->
			<view class="section">
				<text class="section-title">泉州风光</text>
				<!-- 轮播组件，自动播放、带指示器 -->
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" indicator-dots="true">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image class="swiper-image" :src="item.image" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 泉州介绍区 -->
			<view class="section">
				<text class="section-title">泉州介绍</text>
				<!-- 富文本组件，渲染城市介绍 -->
				<rich-text class="rich-text" :nodes="cityIntroduction"></rich-text>
			</view>

			<!-- 探索进度区 -->
			<view class="section">
				<text class="section-title">探索进度</text>
				<view class="progress-container">
					<text class="progress-text">当前进度：{{ progress }}%</text>
					<!-- 修改为滑块组件，添加滑动效果 -->
					<slider 
						class="slider" 
						:value="progress" 
						:min="0" 
						:max="100" 
						:step="1" 
						active-color="#007AFF" 
						background-color="#F0F0F0" 
						show-value 
						@change="onSliderChange"
					/>
				</view>
			</view>

			<!-- 泉州宣传区 -->
			<view class="section">
				<text class="section-title">泉州宣传</text>
				<view class="video-card">
					<image class="video-cover" src="/static/video-poster.jpg" mode="widthFix"></image>
					<!-- 修改后的透明播放按钮，三角形完美居中 -->
					<view class="overlay-play-button" @click="playVideo">
						<view class="play-triangle"></view>
					</view>
				</view>
			</view>

			<!-- 泉州背景音乐区 -->
			<view class="section music-section">
				<text class="section-title">泉州背景音乐</text>
				<view class="red-box-music-player">
					<view class="music-player-bg">
						<view class="music-player-container">
							<!-- 音乐信息 -->
							<view class="music-header">
								<text class="music-title">到时说爱我</text>
								<text class="music-subtitle">茜拉</text>
							</view>
							
							<!-- 播放控制区域 -->
							<view class="playback-controls">
								<!-- 播放/暂停按钮 -->
								<button class="play-pause-btn" @click="toggleMusicPlayback">
									<text class="play-pause-icon">{{ isMusicPlaying ? '❚❚' : '▶' }}</text>
								</button>
								
								<!-- 进度条区域 -->
								<view class="progress-section">
									<!-- 当前时间 -->
									<text class="time-display current-time">{{ formatMusicTime(currentMusicTime) }}</text>
									
									<!-- 进度条 -->
									<slider 
										class="music-progress-slider"
										:value="currentMusicTime" 
										:min="0" 
										:max="musicDuration" 
										:step="1"
										active-color="#FF0000"
										background-color="#E0E0E0"
										block-color="#FF0000"
										block-size="20"
										@changing="onMusicProgressChanging"
										@change="onMusicProgressChange"
									/>
									
									<!-- 总时长 -->
									<text class="time-display total-time">{{ formatMusicTime(musicDuration) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 偏好设置区 -->
			<view class="section">
				<text class="section-title">偏好设置</text>
				<!-- 出行方式选择 -->
				<view class="preference-item">
					<text class="label">出行方式</text>
					<radio-group class="radio-group" @change="changeTransport">
						<label class="radio-item" v-for="(item, index) in transportTypes" :key="index">
							<radio :value="item.value" :checked="item.value === currentTransport" />
							<text class="radio-text">{{ item.label }}</text>
						</label>
					</radio-group>
				</view>
				<!-- 显示推荐景点开关 -->
				<view class="preference-item">
					<text class="label">显示推荐景点</text>
					<switch :checked="showRecommend" @change="toggleRecommend"></switch>
				</view>
				<!-- 探索半径滑块 -->
				<view class="preference-item">
					<text class="label">探索半径: {{ radius }}km</text>
					<slider 
						class="radius-slider"
						:value="radius" 
						:min="1" 
						:max="50" 
						:step="1"
						active-color="#007AFF"
						background-color="#F0F0F0"
						@change="changeRadius"
					/>
				</view>
			</view>

			<!-- 选择城市区 -->
			<view class="section">
				<text class="section-title">选择城市</text>
				<view class="city-select-container">
					<view class="city-list-cell">
						<view class="city-list-cell-left">当前选择</view>
						<view class="city-list-cell-db">
							<picker 
								mode="multiSelector" 
								:range="multiArray" 
								:value="multiIndex"
								@change="bindMultiPickerChange"
								@columnchange="bindMultiPickerColumnChange"
							>
								<view class="city-input">{{ selectedCity }}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 视频播放器 -->
		<video 
			v-if="showVideoPlayer" 
			id="video-player"
			class="video-player" 
			src="/static/city-video.mp4" 
			autoplay 
			controls
			@fullscreenchange="onFullscreenChange"
			@ended="onVideoEnded">
		</video>
	</view>
</template>

<script>
// 省份数据
const provinces = ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'];

// 城市数据
const cities = {
    '北京市': ['北京市'],
    '天津市': ['天津市'],
    '河北省': ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'],
    '福建省': ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
    // 其他省份数据...
};

// 县区数据
const counties = {
    '福建省': {
        '泉州市': ['鲤城区', '丰泽区', '洛江区', '泉港区', '惠安县', '安溪县', '永春县', '德化县', '金门县', '石狮市', '晋江市', '南安市']
    },
    // 其他县区数据...
};

export default {
    data() {
        return {
            isMusicPlaying: false,
            currentMusicTime: 0,
            musicDuration: 218, // 音乐总时长（秒）
            musicAudioContext: null,
            musicProgressInterval: null,
            // 轮播图数据列表
            swiperList: [
                { image: '/static/city1.png' },
                { image: '/static/city2.jpg' },
                { image: '/static/city3.jpg' },
                { image: '/static/city4.jpg' },
                { image: '/static/city5.jpg' }
            ],
            // 城市介绍富文本内容
            cityIntroduction: `<p>海上丝绸之路起点 - 泉州</p>
<p>历史文化：泉州是联合国教科文组织首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
<p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
<p>特色文化：拥有<span style="color: blue;">南音</span>、<span style="color: blue;">木偶戏</span>和<span style="color: blue;">闽南建筑</span>等丰富的非物质文化遗产。</p>`,
            // 探索进度百分比
            progress: 60,
            // 出行方式选项
            transportTypes: [
                { label: '公交', value: 'bus' },
                { label: '自驾', value: 'car' },
                { label: '步行', value: 'walk' }
            ],
            // 当前选中的出行方式
            currentTransport: 'walk',
            // 是否显示推荐景点
            showRecommend: true,
            // 探索半径数值
            radius: 10,
            // 是否显示视频播放器
            showVideoPlayer: false,
            // 城市选择器相关数据
            multiArray: [provinces, cities[provinces[0]] || [], counties[provinces[0]] && counties[provinces[0]][cities[provinces[0]][0]] || []],
            multiIndex: [0, 0, 0],
            selectedCity: ''
        };
    },
    created() {
        this.updateCities();
        this.updateCounties();
        this.updateSelectedCity();
    },
    methods: {
        onSliderChange(e) {
            this.progress = e.detail.value;
        },
        // 播放宣传视频逻辑
        playVideo() {
            this.showVideoPlayer = true;
            this.$nextTick(() => {
                const videoContext = uni.createVideoContext('video-player');
                videoContext.requestFullScreen();
            });
        },
        // 切换出行方式
        changeTransport(e) {
            this.currentTransport = e.detail.value;
        },
        // 切换显示推荐景点
        toggleRecommend(e) {
            this.showRecommend = e.detail.value;
        },
        // 调整探索半径
        changeRadius(e) {
            this.radius = e.detail.value;
        },
        // 全屏状态变化
        onFullscreenChange(e) {
            if (!e.detail.fullScreen) {
                this.showVideoPlayer = false;
            }
        },
        // 视频播放结束
        onVideoEnded() {
            this.showVideoPlayer = false;
        },
        // 城市选择器变化事件
        bindMultiPickerChange(e) {
            this.multiIndex = e.detail.value;
            this.updateSelectedCity();
        },
        // 列变化事件
        bindMultiPickerColumnChange(e) {
            const column = e.detail.column;
            const value = e.detail.value;
            
            if (column === 0) {
                this.multiIndex[0] = value;
                this.multiIndex[1] = 0;
                this.multiIndex[2] = 0;
                this.updateCities();
                this.updateCounties();
            } else if (column === 1) {
                this.multiIndex[1] = value;
                this.multiIndex[2] = 0;
                this.updateCounties();
            } else {
                this.multiIndex[2] = value;
            }
            
            this.updateSelectedCity();
        },
        // 更新城市列表
        updateCities() {
            const provinceIndex = this.multiIndex[0];
            const province = this.multiArray[0][provinceIndex];
            const cityList = cities[province] || [];
            this.multiArray[1] = cityList;
            this.$forceUpdate();
        },
        // 更新县区列表
        updateCounties() {
            const provinceIndex = this.multiIndex[0];
            const cityIndex = this.multiIndex[1];
            const province = this.multiArray[0][provinceIndex];
            const city = this.multiArray[1][cityIndex];
            
            let countyList = [];
            if (counties[province] && counties[province][city]) {
                countyList = counties[province][city];
            }
            
            this.multiArray[2] = countyList;
            this.$forceUpdate();
        },
        // 更新显示的城市文本
        updateSelectedCity() {
            const province = this.multiArray[0][this.multiIndex[0]] || '';
            const city = this.multiArray[1][this.multiIndex[1]] || '';
            const county = this.multiArray[2][this.multiIndex[2]] || '';
            
            this.selectedCity = `${province} - ${city} - ${county}`;
        },
        // 音乐播放控制
        toggleMusicPlayback() {
            if (!this.musicAudioContext) {
                this.initializeMusicPlayer();
            }
            
            if (this.isMusicPlaying) {
                this.pauseMusicPlayback();
            } else {
                this.playMusicPlayback();
            }
        },
        
        initializeMusicPlayer() {
            this.musicAudioContext = uni.createInnerAudioContext();
            this.musicAudioContext.src = '/static/到时说爱我-Shila Amzah.mp3';
            this.musicAudioContext.autoplay = false;
            
            // 音乐播放事件监听
            this.musicAudioContext.onPlay(() => {
                this.isMusicPlaying = true;
                this.startProgressTracking();
                console.log('音乐开始播放');
            });
            
            this.musicAudioContext.onPause(() => {
                this.isMusicPlaying = false;
                this.stopProgressTracking();
                console.log('音乐暂停');
            });
            
            this.musicAudioContext.onEnded(() => {
                this.isMusicPlaying = false;
                this.currentMusicTime = 0;
                this.stopProgressTracking();
                console.log('音乐播放结束');
            });
            
            this.musicAudioContext.onTimeUpdate(() => {
                this.currentMusicTime = Math.floor(this.musicAudioContext.currentTime);
            });
            
            this.musicAudioContext.onCanplay(() => {
                this.musicDuration = Math.floor(this.musicAudioContext.duration);
                console.log('音乐加载完成，总时长：', this.musicDuration, '秒');
            });
            
            this.musicAudioContext.onError((err) => {
                console.error('音乐播放错误：', err);
                uni.showToast({
                    title: '音乐播放失败',
                    icon: 'none'
                });
            });
        },
        
        playMusicPlayback() {
            if (!this.musicAudioContext) {
                this.initializeMusicPlayer();
            }
            
            this.musicAudioContext.play().catch(err => {
                console.error('播放失败：', err);
                uni.showToast({
                    title: '播放失败，请检查网络',
                    icon: 'none'
                });
            });
        },
        
        pauseMusicPlayback() {
            if (this.musicAudioContext) {
                this.musicAudioContext.pause();
            }
        },
        
        // 进度条跟踪
        startProgressTracking() {
            this.stopProgressTracking(); // 先停止之前的跟踪
            this.musicProgressInterval = setInterval(() => {
                if (this.musicAudioContext && this.isMusicPlaying) {
                    this.currentMusicTime = Math.floor(this.musicAudioContext.currentTime);
                }
            }, 1000);
        },
        
        stopProgressTracking() {
            if (this.musicProgressInterval) {
                clearInterval(this.musicProgressInterval);
                this.musicProgressInterval = null;
            }
        },
        
        // 进度条拖动事件
        onMusicProgressChanging(e) {
            // 拖动时实时更新显示时间
            this.currentMusicTime = e.detail.value;
        },
        
        onMusicProgressChange(e) {
            // 拖动结束，跳转到指定位置
            this.currentMusicTime = e.detail.value;
            if (this.musicAudioContext) {
                this.musicAudioContext.seek(this.currentMusicTime);
                // 如果当前是暂停状态，拖动后自动播放
                if (!this.isMusicPlaying) {
                    this.musicAudioContext.play();
                    this.isMusicPlaying = true;
                }
            }
        },
        
        // 时间格式化
        formatMusicTime(seconds) {
            if (isNaN(seconds) || seconds < 0) {
                return '00:00';
            }
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }
    },
    onUnload() {
        // 清理音乐播放器资源
        this.stopProgressTracking();
        if (this.musicAudioContext) {
            this.musicAudioContext.destroy();
            this.musicAudioContext = null;
        }
    },
    onHide() {
        // 页面隐藏时暂停音乐
        if (this.isMusicPlaying && this.musicAudioContext) {
            this.musicAudioContext.pause();
        }
    }
};
</script>

<style>
	
	
	
	/* 设置茜拉封面为背景图 */
	.music-player-bg {
	    background-image: url('/static/茜拉.jpg');
	    background-size: cover;
	    background-position: center;
	    background-repeat: no-repeat;
	    border-radius: 16rpx;
	    padding: 40rpx;
	    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	}
	
	/* 让文字和控件在背景上更清晰 */
	

.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    position: relative;
}

.scroll-content {
    width: 100%;
}

.section {
    width: 100%;
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
    position: relative;
    padding-left: 20rpx;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 36rpx;
    background-color: #007AFF;
    border-radius: 4rpx;
}

.swiper {
    width: 100%;
    height: 450rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background-color: #f9f9f9;
}

.swiper-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rich-text {
    font-size: 30rpx;
    color: #666;
    line-height: 1.8;
}

.progress-container {
    padding: 20rpx 0;
}

.progress-text {
    font-size: 30rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
}

.video-card {
    position: relative;
    border-radius: 16rpx;
    overflow: hidden;
    height: 400rpx;
}

.video-cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 透明播放按钮样式 */
.overlay-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100rpx;
    height: 100rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}

.overlay-play-button:active {
    transform: translate(-50%, -50%) scale(0.95);
    background-color: rgba(0, 0, 0, 0.7);
}

/* 使用CSS绘制完美居中的三角形 */
.play-triangle {
    width: 0;
    height: 0;
    border-left: 30rpx solid white;
    border-top: 20rpx solid transparent;
    border-bottom: 20rpx solid transparent;
    margin-left: 4rpx; /* 微调三角形位置使其在圆形中完美居中 */
}

/* 红色方框音乐播放器 */



.red-box-music-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #000, #000, #000);
}

.music-player-container {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}

/* 音乐信息头部 */
.music-header {
    text-align: center;
    padding: 10rpx 0;
}

.music-title {
    display: block;
    font-size: 48rpx;       /* 原36rpx → 放大 */
    font-weight: bold;
    color: #FFFFFF;         /* 改为白色 */
    margin-bottom: 10rpx;
    letter-spacing: 1rpx;
    text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.5); /* 增加文字阴影让白字更清晰 */
}

.music-subtitle {
    display: block;
    font-size: 34rpx;       /* 原28rpx → 稍放大 */
    color: #FFFFFF;         /* 改为白色 */
    font-weight: 600;
    text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.5);
}

/* 播放控制区域 */
.playback-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25rpx;
}

/* 播放/暂停按钮 */
.play-pause-btn {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: none;
    background: #999;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6rpx 20rpx rgba(255, 0, 0, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.play-pause-btn:active {
    transform: scale(0.95);
    background: #999;
    box-shadow: 0 4rpx 15rpx rgba(255, 0, 0, 0.3);
}

.play-pause-icon {
    font-size: 40rpx;
    font-weight: bold;
    margin-left: 4rpx; /* 微调播放图标位置 */
}

/* 进度条区域 */
.progress-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20rpx;
}

.time-display {
    font-size: 36rpx;       
    color: #ffffff;        
    font-weight: 700;
    min-width: 75rpx;
    text-align: center;
    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}
.current-time {
    order: 1;
}

.total-time {
    order: 3;
}

.music-progress-slider {
    flex: 1;
    order: 2;
    margin: 0;
}

.music-progress-slider .uni-slider-track {
    height: 6rpx;
    border-radius: 3rpx;
}

.music-progress-slider .uni-slider-thumb {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    background-color: #FF0000;
    border: 4rpx solid #ffffff;
    box-shadow: 0 2rpx 8rpx rgba(255, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.music-progress-slider .uni-slider-thumb:active {
    transform: scale(1.2);
    box-shadow: 0 3rpx 12rpx rgba(255, 0, 0, 0.6);
}

/* 播放状态动画 */
.play-pause-btn.playing {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 6rpx 20rpx rgba(255, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 6rpx 30rpx rgba(255, 0, 0, 0.6);
    }
    100% {
        box-shadow: 0 6rpx 20rpx rgba(255, 0, 0, 0.4);
    }
}

/* 偏好设置样式 */
.preference-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1px solid #f0f0f0;
}

.preference-item:last-child {
    border-bottom: none;
}

.label {
    width: 200rpx;
    font-size: 30rpx;
    color: #333;
    flex-shrink: 0;
}

.radio-group {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    gap: 40rpx;
}

.radio-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.radio-text {
    font-size: 30rpx;
    color: #666;
    margin-left: 10rpx;
}

/* 探索半径滑块自定义样式 */
.radius-slider {
    flex: 1;
    margin-left: 20rpx;
}

.radius-slider .uni-slider-track {
    height: 6rpx;
    border-radius: 3rpx;
}

.radius-slider .uni-slider-thumb {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    background-color: #007AFF;
    border: 4rpx solid #fff;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
}

/* 城市选择样式 */
.city-select-container {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.city-list-cell {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1px solid #f0f0f0;
}

.city-list-cell:last-child {
    border-bottom: none;
}

.city-list-cell-left {
    white-space: nowrap;
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
}

.city-list-cell-db {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.city-input {
    height: 50rpx;
    padding: 15rpx 25rpx;
    line-height: 50rpx;
    font-size: 30rpx;
    color: #666;
    background: #fff;
    flex: 1;
    text-align: right;
}

.city-input::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 10rpx;
    border-left: 8rpx solid transparent;
    border-right: 8rpx solid transparent;
    border-top: 12rpx solid #999;
    vertical-align: middle;
}

.video-player {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 999;
}

/* 响应式设计 */
@media (max-width: 375px) {
    .red-box-music-player {
        padding: 20rpx;
        margin: 15rpx 0;
    }
    
    .play-pause-btn {
        width: 90rpx;
        height: 90rpx;
    }
    
    .play-pause-icon {
        font-size: 36rpx;
    }
    
    .music-title {
        font-size: 32rpx;
    }
    
    .music-subtitle {
        font-size: 26rpx;
    }
    
    .time-display {
        font-size: 22rpx;
        min-width: 65rpx;
    }
}

/* 加载状态 */
.music-player-container.loading {
    opacity: 0.7;
}

.music-player-container.loading::after {
    content: '加载中...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FF0000;
    font-size: 28rpx;
}
</style>